The gate goes first, and it looks like the game - #224

Two things the owner found by opening the real thing in a private window, both
of them mine.

PLACEMENT. The gate was rendered BELOW `phase === 'menu'`, and 'menu' is what
draws the world map. Sequential early returns mean order in the file *is* the
behaviour: the map won, and the login could not appear until something moved the
phase off it — so it turned up AFTER the map instead of before it. Owner:
*"harusnya sebelum user membuka maps, jd di awal banget persis setelah user klik
Play game di landing page."* The block now sits ahead of every phase, which is
what its own comment claimed all along.

STYLING. It used `ns-signin-card` and `ns-signin-sub`, which this app does not
define anywhere, so it rendered as unstyled text on a black rectangle. Owner:
*"halaman login nya jelek banget."* Nothing caught it and nothing could have:
tsc does not know about CSS, and check:cssvars only validates custom properties.
It now uses the markup and stylesheet SignInScreen already had — the bracket
frame, the plate fill, the white Google button, the bevelled clips — and the
test suite gained a check that every ns- class the gate names is really declared
in signin.css.

THE THREE METHODS ARE ON THE SCREEN. One button that opened a modal to ask which
method you wanted hid the offer behind a press: a player who wants Google could
not see that Google was on offer. Each method is its own button now, and each
opens Privy already narrowed to that one method, so the choice is made on a
screen that looks like this game and Privy only handles the mechanics.

The three marks moved to components/game/SignInMarks.tsx rather than being
copied. Two Google marks is two chances for one to be quietly recoloured until
the screens diverge — and Google's guidelines make that a compliance problem
rather than a matter of taste.

Verified: tsc clean, build unchanged at 142/242 kB, 22/22 test:privy,
check:copy, check:cssvars, check:market and audit pass, lint 35 (one below the
baseline). The screen was rendered in a real browser at 390x844 and the
screenshot sent for approval before merge.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017A764RdnwpyWnG7uCNhMiQ

OWNER: *"itu kalo aku klik google, ga muncul 2x pop up kan? layar privy juga
maksudku."* It did, and checking rather than answering from memory is what
found it: `login({loginMethods:['google']})` opens Privy's modal holding a
single Google button — the same question this screen just asked, asked again —
and only then hands off to Google's account chooser.

useLoginWithOAuth().initOAuth() goes straight to Google with no Privy UI at all,
so the tap on "Continue with Google" is now the last thing before Google's own
screen. It is a full-page redirect rather than a popup, which is the right shape
on a phone anyway: popups are what mobile browsers block.

Privy marks that hook @experimental, so it is not the only path. A throw falls
back to the modal — one extra screen is a worse login, an unrecoverable one is
no login at all.

Email and wallet stay on Privy's modal on purpose. There the modal is doing real
work rather than repeating a question: typing an address, or choosing which of
several wallets. Nothing about the screen itself changed, so the approved
screenshot still stands.

Verified: tsc clean, build unchanged at 142/242 kB, 24/24 test:privy, check:copy
clean.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017A764RdnwpyWnG7uCNhMiQ